<!DOCTYPE html>
<html>
	<head>
		<meta http-equiv="Content-Type" content="text/html; charset=UTF-8">
		<title>Api Service Console</title>

		<link type="text/css" rel="stylesheet" media="all" href="/static/css/bootstrap.min.css">
		<link type="text/css" rel="stylesheet" media="all" href="/static/css/base.css">
		<link type="text/css" rel="stylesheet" href="/static/lib/jsoneditor/jsoneditor.min.css">
		<link type="text/css" rel="stylesheet" href="/static/lib/codemirror-5.7/lib/codemirror.css">
		<link type="text/css" rel="stylesheet" href="/static/lib/codemirror-5.7/theme/monokai.css">
		<link type="text/css" rel="stylesheet" href="/static/lib/codemirror-5.7/addon/scroll/simplescrollbars.css">
	</head>
	<body>
		<nav class="navbar navbar-default" style="margin-bottom: 5px;">
			<div class="container-fluid">
				<div class="navbar-header">
					<a class="navbar-brand" href="#">Api Service Console</a>
				</div>
			</div>
		</nav>

		<form class="p15 clearfix" style="display: flex;justify-content: space-between; align-items: flex-start; margin-top: 50px;">
			<div>
				<div style="width:300px;">
					<label for="resource">选择资源</label>
					<select id="resource" class="form-control" style="width:200px; display:inline-block;">
						{{ resources }}
					</select>
				</div>
				<div style="margin-top: 25px; margin-left: 27px;">
					<label for="resource" style="vertical-align:top;">数据</label>
					<div class="xa-data xui-data" style="width:500px; height:200px; display:inline-block;"></div>
					<div style="display: flex;justify-content: flex-end;">
						<a class="btn btn-success xui-link xa-link" data-action="get">GET</a>
						<a class="btn btn-success xui-link xa-link" data-action="put">PUT</a>
						<a class="btn btn-success xui-link xa-link" data-action="post">POST</a>
						<a class="btn btn-danger xui-link xa-link" data-action="delete">DELETE</a>
					</div>
				</div>
			</div>
			<div id="result" style="height:500px; width:38vw;"></div>
		</form>

		<!-- 3rd party lib -->
		<script type="text/javascript" src="/static/lib/jquery/jquery-1.11.2.min.js"></script>
		<script type="text/javascript" src="/static/lib/jsoneditor/jsoneditor.min.js"></script>
		<script type="text/javascript" src="/static/lib/codemirror-5.7/lib/codemirror.js"></script>
		<script type="text/javascript" src="/static/lib/codemirror-5.7/mode/javascript/javascript.js"></script>
		<script type="text/javascript" src="/static/lib/codemirror-5.7/addon/scroll/simplescrollbars.js"></script>

		<script type="text/javascript">
		var dataCodeMirror = null;
		var resultViewer = null;

		var __createCodeEditor = function(selector, mode, value) {
			var $code = this.$(selector);
			var codeMirror = CodeMirror($code.get(0), {
				value: value,
				mode: mode,
				lineNumbers: true,
				theme: 'monokai',
				scrollbarStyle: 'simple',
				lineWrapping: true
			});
			$code.find('.CodeMirror').height($code.outerHeight() - 32);

			return codeMirror;
		};

		var __createResultViewer = function() {
			var container = document.getElementById('result');
			var options = {
				mode: 'text'
			};

			var editor = new JSONEditor(container, options, '');
			return editor;
		}

		$(document).ready(function() {
			dataCodeMirror = __createCodeEditor('.xa-data', 'javascript', "data = {\n  id:1,\n}");
			resultViewer = __createResultViewer();

			var failCallback = function() {
				alert('访问失败！请查看日志');
			};

			$(document).delegate('.xa-span', 'click', function(event) {
				var $tr = $(event.currentTarget);
				var $targetTr = $('[data-index="'+$tr.data('target')+'"]');
				if ($targetTr.is(':visible')) {
					$targetTr.hide();
				} else {
					$targetTr.show();
				}
			});

			$('.xa-link').click(function(event) {
				var $link = $(event.currentTarget);
				var action = $link.data('action');
				var data = dataCodeMirror.getValue();
				data = eval(data.replace(/'/g, '\''));
				var resource = $('#resource').val();
				var pos = resource.lastIndexOf('.');
				var url = '/' + resource.substring(0, pos) + '/' + resource.substring(pos+1) + '/';

				resultViewer.set('fetching...');

				if (action === 'get') {
					$.get(url, data, function(data) {

						if (data.code !== 200) {
							var errMsg = data.errMsg;
							if (typeof errMsg === 'object') {
								errMsg = JSON.stringify(errMsg);
							}

							var innerErrMsg = data.innerErrMsg;
							if (typeof innerErrMsg === 'object') {
								innerErrMsg = JSON.stringify(innerErrMsg);
							}

							var buffer = ['Error: ' + errMsg, '\n', innerErrMsg];
							$('.jsoneditor textarea').val(buffer.join('\n'));
						} else {
							resultViewer.set(data);
						}
					}).fail(failCallback);
				} else if (action === 'put' || action === 'post' || action === 'delete') {
					if (action !== 'post') {
						url += '?_method=' + action;
					}
					$.post(url, data, function(data) {

						if (data.code !== 200) {
							var errMsg = data.errMsg;
							if (typeof errMsg === 'object') {
								errMsg = JSON.stringify(errMsg);
							}

							var innerErrMsg = data.innerErrMsg;
							if (typeof innerErrMsg === 'object') {
								innerErrMsg = JSON.stringify(innerErrMsg);
							}

							var buffer = ['Error: ' + errMsg, '\n', innerErrMsg];
							$('.jsoneditor textarea').val(buffer.join('\n'));
						} else {
							resultViewer.set(data);
						}
					}).fail(failCallback);
				}
			});
		})
		</script>
	</body>
</html>
